/* constant */
@rem: 25rem;

.danger {
  color: #ff310f;
}

.container {
  width: 100%;
  height: 100%;
  overflow: scroll;
  margin-bottom: 60/@rem;
  font-size: 12/@rem;

  // 信息
  .info-group {
    margin: 0 0 10/@rem;
    background: #FFFFFF;

    // 用户信息
    .user{
      display: flex;
      padding: 15/@rem;
      border-bottom: 1/@rem solid #ddd;
      .left{
        width: 60/@rem;
        margin-right: 15/@rem;
        img{
          width: 60/@rem;
          height: 60/@rem;
          border-radius: 60/@rem;
          box-shadow: 0 0 3/@rem #ddd;
        }
      }
      .center{
        line-height: 60/@rem;
        flex: 1;
        text-align: left;
        img{
          width: 20/@rem;
          height: 20/@rem;
          margin-left: 10/@rem;
          position: relative;
          top: 4/@rem;
        }
      }
      .right{
        width: 30/@rem;
        margin-left: 15/@rem;
        img{
          width: 30/@rem;
          height: 30/@rem;
          margin: 15/@rem 0;
        }
      }
    }

    // 订单信息
    .order-info-group{
      display: flex;
      .order-info-item{
        padding: 10/@rem 0;
        margin: 5/@rem 0;
        flex: 1;
        p{
          margin: 0;
          padding: 0;
        }
        p:first-child{
          font-size: 18/@rem;
          font-family: "微软雅黑";
        }
      }
      .order-info-item:first-child{
        border-right: 1/@rem solid #ddd;
      }
    }


    // 地址
    .address {
      overflow: hidden;
      .address-item {
        display: flex;
        margin: 15/@rem 0;
        .left {
          min-width: 60/@rem;
        }
        .right {
          line-height: 25/@rem;
          text-align: left;
          p {
            margin: 0;
            padding: 0;
          }
        }
        .address-icon, .address-excision {
          display: block;
          margin: 0 auto;
        }
        .address-icon {
          width: 25/@rem;
          height: 25/@rem;
        }
        .address-excision {
          width: 8/@rem;
          height: 8/@rem;
          margin: 8/@rem auto;
        }
      }
    }

    // 详述
    .detail {
      overflow: hidden;
      .detail-item {
        padding: 15/@rem;
        display: flex;
        border-bottom: 1/@rem solid #ddd;
        text-align: left;
        // 侧边
        .side {
          margin-right: 15/@rem;
          color: #999;
          min-width: 60/@rem;
        }
        // 图标
        .icon {
          width: 20/@rem;
          height: 20/@rem;
          margin: 0 5/@rem;
          position: relative;
          top: 5/@rem;
        }
        // 音频
        .audio {
          background: #5B9BF3;
          color: #FFFFFF;
          padding: 5/@rem 10/@rem;
          border-radius: 5/@rem;
        }
        // 图片
        .img-wrap {
          height: 80/@rem;
          overflow: hidden;
          border-radius: 5/@rem;
          border: 1/@rem solid #ddd;
          .img {
            width: 150/@rem;
            height: 150/@rem;
          }
        }
      }
    }
  }

  // 底部标签栏
  .tabbar-bottom {
    background: #FFFFFF;
    border-top: 1/@rem solid #ddd;
    height: 60/@rem;
    line-height: 60/@rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    button {
      color: #FFFFFF;
      background: #20AD20;
      border: none;
      width: 95%;
      margin: 0 2.5%;
      height: 40/@rem;
      line-height: 40/@rem;
      border-radius: 5/@rem;
    }
  }
}
